<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
      :before-close="handleClose">

      <!-- -----------------------------------------------------基本信息-------------------------------------------------------------- -->
      <div style="padding: 0 80px;">
        <el-divider>基本信息</el-divider>
        <div class="dialog_left">
          <el-descriptions direction="vertical" :column="8" border>
            <el-descriptions-item label="采购标题">{{ ruleForm.title || '-' }}</el-descriptions-item>
            <el-descriptions-item label="申请时间">{{ ruleForm.applicationTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="申请人">{{ ruleForm.applicantName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="采购类型">{{ ['设备采购', '物料采购'][ruleForm.type] }}</el-descriptions-item>
            <el-descriptions-item label="期望供货日期">{{ ruleForm.desiredDeliveryTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="购置理由">{{ ruleForm.reason || '-' }} </el-descriptions-item>
            <el-descriptions-item label="备注">{{ ruleForm.remark || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- ---------------------------------------------------物料采购表格----------------------------------------------------------- -->
        <el-divider>采购信息</el-divider>
        <div v-if="ruleForm.purchaseType == 0">
          <div class="dialog_table" v-if="ruleForm.type == 1">
            <el-table :data="ruleForm.purchaseConsumableVos" style="width: 100%">
              <el-table-column label="序号" width="100">
                <template slot-scope="scope">
                  <div> {{ scope.$index + 1 }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="consPriceAndAmountVo.materialNum" label="编号" width="180" />
              <el-table-column prop="consPriceAndAmountVo.materialName" label="名称" show-overflow-tooltip />
              <el-table-column prop="consPriceAndAmountVo.typeName" label="类别" />
              <el-table-column prop="consPriceAndAmountVo.model" label="规格型号" show-overflow-tooltip>
                <template slot-scope="{row}">
                  <div> {{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.model || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="consPriceAndAmountVo.supplierName" label="供应商" show-overflow-tooltip />
              <el-table-column prop="consPriceAndAmountVo.unitName" label="单位" />
              <el-table-column prop="price" label="单价（元）" />
              <el-table-column prop="amount" label="采购数量" />
              <el-table-column prop="consPriceAndAmountVo.amount" label="库存数量">
                <template slot-scope="{row}">
                  <div> {{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.amount || '0' }} </div>
                </template>
              </el-table-column>
              <el-table-column label="合计（元）">
                <template slot-scope="scope">
                  <div> {{ totalPrice(scope.row.price, scope.row.amount) }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="stayWarehousing" label="待入库数量">
                <template slot-scope="{row}">
                  <div> {{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.stayWarehousing || '0' }} </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- ---------------------------------------------------设备采购表格----------------------------------------------------------- -->
          <div v-if="ruleForm.type == 0" class="dialog_table">
            <el-table :data="ruleForm.purchaseEquipmentVos" style="width: 100%">
              <el-table-column label="序号" width="100">
                <template slot-scope="scope">
                  <div> {{ scope.$index + 1 }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="purchaseEquipmentBaseVo.equipmentName" label="设备名称" show-overflow-tooltip />
              <el-table-column prop="purchaseEquipmentBaseVo.typeName" label="类别" />
              <el-table-column prop="purchaseEquipmentBaseVo.brand" label="品牌" />
              <el-table-column prop="purchaseEquipmentBaseVo.supplierName" label="供应商" show-overflow-tooltip />
              <el-table-column prop="price" label="采购单价" />
              <el-table-column prop="purchaseEquipmentBaseVo.unitName" label="单位" />
              <el-table-column prop="purchaseEquipmentBaseVo.model" label="规格型号" show-overflow-tooltip />
              <el-table-column prop="acceptanceFlag" label="验收状态">
                <template slot-scope="scope">
                  <div> {{ ['已验收', '未验收', '验收中'][scope.row.acceptanceFlag] }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="purchaseTime" label="申购时间" show-overflow-tooltip />
              <el-table-column prop="purchaseEquipmentBaseVo.remark" label="备注" show-overflow-tooltip>
                <template slot-scope="{row}">
                  <div> {{ row.purchaseEquipmentBaseVo && row.purchaseEquipmentBaseVo.remark || '-' }} </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- ---------------------------------------------------设备采购表格----------------------------------------------------------- -->
        <div v-if="ruleForm.purchaseType == 1">
          <div v-if="ruleForm.type == 0">
            <el-table :data="ruleForm.purchaseEquipmentBases" style="width: 100%" max-height="550px">
              <el-table-column label="序号" width="100">
                <template slot-scope="scope">
                  <div> {{ scope.$index + 1 }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="equipmentName" label="设备名称" width="160" />
              <el-table-column prop="brand" label="设备品牌" width="160" />
              <el-table-column prop="typeName" label="设备类别" width="160">
                <template slot-scope="{row}">
                  <div>{{ row. typeName||'-'}} </div>
                </template>
              </el-table-column>
              <el-table-column prop="model" label="设备规格型号" width="160" />
              <el-table-column label="是/否计量设备" width="160">
                <template slot-scope="{row}">
                  <div>{{ ['是', '否'][row.meterageFlag] }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="meterageNum" label="计量编号" width="160">
                <template slot-scope="{row}">
                  <div> {{ row.meterageNum || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="meterageNum" label="备注" width="160">
                <template slot-scope="{row}">
                  <div> {{ row.remark || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="meterageNum" label="设备附件" width="160">
                <template slot-scope="scope">
                  <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href=" scope.row.file"
                    target="_blank">
                    附件资料</el-link>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="220">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" icon="el-icon-view"
                    @click="handleSelectImage(scope.row.image)">
                    图片
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="ruleForm.type == 1">
            <el-table :data="ruleForm.purchaseConsumableBases" style="width: 100%">
              <el-table-column label="序号" width="100">
                <template slot-scope="scope">
                  <div> {{ scope.$index + 1 }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="materialNum" label="物料编号" min-width="180" />
              <el-table-column prop="materialName" label="物料名称" show-overflow-tooltip min-width="120" />
              <el-table-column label="类型" min-width="120">
                <template slot-scope="{row}">
                  <dict-tags :options="SparePartsAndConsumables" :value="row.kind" />
                </template>
              </el-table-column>
              <el-table-column prop="model" label="规格型号" show-overflow-tooltip min-width="120">
                <template slot-scope="{row}">
                  <div> {{ row.model || '-' }} </div>
                </template>
              </el-table-column>
              <el-table-column prop="unitName" label="单位" min-width="120" />
              <el-table-column prop="purchaseCount" label="采购数量" />
              <el-table-column prop="lowerLimit" label="库存预警下限" min-width="120" />
              <el-table-column prop="highLimit" label="库存预警上限" min-width="120" />
              <el-table-column prop="purchaseCycle" label="采购周期（天）" min-width="120">
                <template slot-scope="scope">
                  <div> {{scope.row.purchaseCycle||'-'}} </div>
                </template>
              </el-table-column>
              <el-table-column prop="replaceCycle" label="更换周期（天）" min-width="120">
                <template slot-scope="scope">
                  <div> {{scope.row.replaceCycle||'-'}} </div>
                </template>
              </el-table-column>
              <el-table-column prop="equipmentNames" label="物料附件" show-overflow-tooltip min-width="160">
                <template slot-scope="scope">
                  <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href=" scope.row.file"
                    target="_blank">
                    附件资料</el-link>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" icon="el-icon-view"
                    @click="handleSelectImage(scope.row.image)">
                    图片
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin:20px 0 15px 0;color: red;font-size: 12px;">注：审核通过后，新采购品将自动加入系统基值
          </div>
          <el-divider>供应商比选信息</el-divider>
          <el-table :data="ruleForm.supplierCompares" max-height="550px" style="width: 100%">
            <el-table-column label="序号" width="100">
              <template slot-scope="scope">
                <div> {{ scope.$index + 1 }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="supplierName" label="供应商名称" min-width="160" />
            <el-table-column prop="address" label="地址" min-width="160" />
            <el-table-column prop="contact" label="联系人" min-width="160" />
            <el-table-column prop="telephone" label="联系电话" show-overflow-tooltip min-width="160">
              <template slot-scope="{row}">
                <div> {{ row.telephone || '-' }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="website" label="官网" show-overflow-tooltip min-width="160">
              <template slot-scope="{row}">
                <div> {{ row.website || '-' }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="file" label="附件" min-width="160">
              <template slot-scope="scope">
                <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href="scope.row.file"
                  target="_blank">
                  附件资料</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="website" label="报价（单价）" show-overflow-tooltip min-width="160">
              <template slot-scope="{row}">
                <div> ￥{{ row.price || '-' }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="website" label="供应商特点描述" show-overflow-tooltip min-width="160">
              <template slot-scope="{row}">
                <div> {{ row.description || '-' }} </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template slot-scope="scope">
                <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelectImage(scope.row.image)">
                  图片
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin:20px 0 15px 0;color: red;font-size: 12px;">注：审核通过后，新供应商将自动加入供应商管理模块中
          </div>
          <el-divider>比选结果</el-divider>

          <div class="supplierTitle children">
            <div class="suppliertitle">
              <div>选定供应商：</div>
              <div style="margin-left: 10px;"> {{ruleForm.supplierCompare&&ruleForm.supplierCompare.supplierName||'-'}}
              </div>
            </div>
            <div class="suppliertitle">
              <div style="margin-left: 10px;">选定原因：</div>
              <div class="spantitle"> {{ruleForm.selectSupplierReason ||'-'}} </div>
            </div>
            <div class="suppliertitle">
              <div style="margin-left: 10px;">采购总价：</div>
              <div class="spantitle" style="font-size: 20px;font-weight: bold;">
                ￥{{ruleForm.supplierCompare&&ruleForm.supplierCompare.totalPrice ||'-'}} </div>
            </div>
          </div>
          <el-divider>附件信息</el-divider>
          <div class="supplierTitle children">
            <div class="suppliertitle">
              <div style="margin-left: 40px;">图片：</div>
              <div>
                <template>
                  <ImagePreview v-for="(item,i) in image(ruleForm.images)" :key="i" :src="item.url" :width="100"
                    :height="100" style="margin-left: 20px;">
                  </ImagePreview>
                </template>
              </div>
            </div>
            <div class="suppliertitle">
              <div style="margin-left: 40px;">附件：</div>
              <div>
                <el-link :disabled="!(ruleForm.files)" icon="el-icon-document" type="primary" style="margin-left: 20px;"
                  v-for="(item,i) in file(ruleForm.files)" :key="i" :href="item" target="_blank">
                  附件资料</el-link>
              </div>
            </div>
          </div>
        </div>

        <!-- --------------------------------------审核信息---------------------------------------------- -->
        <el-divider>审核信息</el-divider>
        <el-input type="textarea" v-model.trim="form.view" placeholder="请输入审核意见" rows="4" maxlength="50"
          show-word-limit />
        <div class="dialog-footer">
          <div align="center">
            <el-button type="primary" @click="handleConfirm(2)">通过</el-button>
            <el-button type="danger" @click="handleConfirm(3)">驳回</el-button>
          </div>
        </div>
      </div>

    </el-dialog>
    <!-- 图片显示组件 -->
    <template v-if="ImageOpen">
      <Dialog-image :src="imageSrc" />
    </template>
  </div>

</template>

<script>
import { statusSort, listDetail } from '@/api/purchasing/purchasing';
export default {
  name: 'Form',
  data () {
    return {
      dialogVisible: false,
      ruleForm: {},
      isUpdateForm: false,
      dialogTitle: '审核',
      form: {
        auditId: null, //审核信息ID
        applicationId: null, //采购ID
        status: null, //状态（2已通过 3已驳回）
        view: "" //审核意见
      },
      imageSrc: undefined,//图片预览参数
      ImageOpen: false,
      /** 表单规则 --------------------------------------------------------------------------------------------------------------------- */
      rules: {
        typeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
      /** ----------------------------------------------------------------------------------------------------------------------------- */
    }
  },
  computed: {
  },
  methods: {
    // 打开表单对话框
    openDialog (ids = null) {
      if (ids) {
        this.form.auditId = ids.auditId
        this.form.applicationId = ids.purchaseId
        listDetail(ids.purchaseId).then(({ data }) => {
          console.log(data);
          /** 修改时的表单参数赋值 --------------------------------------------------------------------------------------------------------------------- */
          this.ruleForm = data
          this.dialogVisible = true
        })
      }
    },
    // 通过---- 驳回   ==>事件
    submitForm (type) {
      this.form.status = type
      statusSort(this.form).then(() => {
        this.$message({
          message: type == 2 ? '审核已通过' : '审核已驳回',
          type: type == 2 ? 'success' : 'error'
        })
        this.handleClose()
        this.$emit('submit_success')
      })
    },
    /** ---------------------------------------------------------------------------------------------------------------------------------------- */
    // 关闭窗口，重置表单-------------------
    handleClose () {
      this.form.view = ''
      this.dialogVisible = false
    },
    // 提交按钮----------------------------
    handleConfirm (type) {
      if (type == 3 && this.form.view == '') {
        this.$message({
          message: '驳回需要填写审核意见！',
          type: 'error'
        });
        return
      };
      this.submitForm(type)
    },
    totalPrice (price, num) {
      return (price * num).toFixed(2)
    },
    // 查看图片
    handleSelectImage (src) {
      this.imageSrc = src || ''
      this.ImageOpen = true
    },
    image (img) {
      let arr = img.split(',').map(item => {
        return {
          url: item
        }
      })
      return arr
    },
    file (val) {
      let arr = val.split(',')
      return arr
    }
  }
}
</script>
<style lang="scss" scoped>
.form {
  width: 70%;
  margin: 0 auto;
}

/* 基本信息文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;

}

.spantitle {
  margin-left: 20px;
}

.suppliertitle {
  display: flex;
  font-size: 14px;
  color: #000;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
}
</style>
